export let DomHandler = {
    zIndex:1000,
    getComputedStyle:function(el,attr){
        let style = {};
        if(el.currentSty){
            style = el.currentSty;
        } else {
            style = getComputedStyle(el,false);
        }
        return (attr?style[attr]:style);
    },
    getHorizontalBorderWidth(el){
        let style = this.getComputedStyle(el);
        return parseFloat(style.borderLeftWidth) + parseFloat(style.borderRightWidth);
    },
    getVerticalBorderWidth:function(el){
        let style = this.getComputedStyle(el);
        return parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
    },
    getHorizontalPadding:function(el){
        let style = this.getComputedStyle(el);
        return parseFloat(style.paddingLeft) + parseFloat(style.paddingRight);
    },
    getVerticalPadding:function(el){
        let style = this.getComputedStyle(el);
        return parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
    },
    getHorizontalMargin:function(el){
        let style = this.getComputedStyle(el);
        return parseFloat(style.marginLeft) + parseFloat(style.marginRight);
    },
    getVerticalMargin:function(el){
        let style = this.getComputedStyle(el);
        return parseFloat(style.marginTop) + parseFloat(style.marginBottom);
    },
    // 包含border、padding
    width:function(el){
        return el.getBoundingClientRect().width;
    },
    height:function(el){
        return el.getBoundingClientRect().height;
    },
    // 不包含border、padding
    getInnerWidth:function(el){
        return this.width(el) - this.getHorizontalBorderWidth(el) - this.getHorizontalPadding(el);
    },
    getInnerHeight:function(el){
        return this.height(el) - this.getVerticalBorderWidth(el) - this.getVerticalPadding(el);
    },
    getOuterWidth:function(el,margin){
        if(!margin) return this.width(el);
        return this.width(el) - this.getHorizontalMargin(el);
    },
    getOuterHeight:function(el,margin){
        if(!margin) return this.height(el);
        return this.width(el) - this.getVerticalMargin(el);
    },
    getFixedPosition:function(el){
        let offset = {left:el.offsetLeft,top:el.offsetTop};
        while(el.parentNode && el.parentNode.tagName.toLowerCase() != 'html'){
            if(el.parentNode == el.offsetParent){
                offset.left += el.parentNode.offsetLeft;
                offset.top += el.parentNode.offsetTop;
            }
            offset.left -= el.parentNode.scrollLeft;
            offset.top -= el.parentNode.scrollTop;
            el = el.parentNode;
        }
        return offset;
    },
    getscrollBarWidth:function(){
        let container = document.createElement('div');
        container.style.width = '50px';
        container.style.height = '50px';
        container.style.zIndex = -1;
        container.style.opacity = 0;
        container.style.overflow = 'scroll';
        let content = document.createElement('div');
        content.style.width = '100%';
        content.style.height = '100%';
        content.style.zIndex = -1;
        content.style.opacity = 0;
        container.appendChild(content);
        document.body.appendChild(container);
        let barWidth = container.offsetWidth - content.offsetWidth;
        document.body.removeChild(container);
        return barWidth;;
    }
}